{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}

<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
  <div>
    <div class="cart__footer">
      {%- if section.settings.show_cart_note -%}
        <cart-note class="cart__note field">
          <label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
          <textarea class="text-area text-area--resize-vertical field__input" name="note" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
        </cart-note>
      {%- endif -%}

      {%- if section.settings.show_cart_accessories -%}
      {%- liquid
        assign products_to_display = section.settings.collection.all_products_count
      
        if section.settings.collection.all_products_count > section.settings.products_to_show
          assign products_to_display = section.settings.products_to_show
          assign more_in_collection = true
        endif
      -%}
      <div class="cart_collection collection{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
        <div class="{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
          <h2> {{ section.settings.title | escape }} </h2>
          
           {%- if section.settings.text != blank -%}
            <div class="fr_list">{{ section.settings.text }}</div>
          {%- endif -%}
      
          {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
            <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
          {%- endif -%}
        </div>
      
        <slider-component class="slider-mobile-gutter">
          <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
            {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
              <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
                {% render 'cart-product-card',
                  product_card_product: product,
                  media_size: section.settings.image_ratio,
                  show_secondary_image: section.settings.show_secondary_image,
                  add_image_padding: section.settings.add_image_padding,
                  show_vendor: section.settings.show_vendor,
                  show_image_outline: section.settings.show_image_outline,
                  show_rating: section.settings.show_rating,
                  add_to_cart: section.settings.add_to_cart
                %}
              </li>
            {%- else -%}
              {%- for i in (1..4) -%}
                <li class="grid__item">
                  {% render 'product-card-placeholder' %}
                </li>
              {%- endfor -%}
            {%- endfor -%}
          </ul>
          {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
            <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
              <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
              <div class="slider-counter caption">
                <span class="slider-counter--current">1</span>
                <span aria-hidden="true"> / </span>
                <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
                <span class="slider-counter--total">{{ products_to_display }}</span>
              </div>
              <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
            </div>
          {%- endif -%}
        </slider-component>
      
        {%- if section.settings.show_view_all and more_in_collection -%}
          <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
            <a href="{{ section.settings.collection.url }}"
              class="button"
              aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
            >
              {{ 'sections.featured_collection.view_all' | t }}
            </a>
          </div>
        {%- endif -%}
      </div>
      {%- endif -%}


      <div class="cart__blocks">
        {% for block in section.blocks %}
          {%- case block.type -%}
            {%- when '@app' -%}
              {% render block %}
            {%- when 'subtotal' -%}
              <div class="js-contents" {{ block.shopify_attributes }}>
                <div class="totals">
                  <h3 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h3>
                  <p class="totals__subtotal-value">{{ cart.total_price | money_with_currency }}</p>
                </div>

                <div>
                  {%- if cart.cart_level_discount_applications.size > 0 -%}
                    <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                      {%- for discount in cart.cart_level_discount_applications -%}
                        <li class="discounts__discount discounts__discount--end">
                          {%- render 'icon-discount' -%}
                          {{ discount.title }}
                          (-{{ discount.total_allocated_amount | money }})
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- endif -%}
                </div>

                <small class="tax-note caption-large rte">
                  {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- elsif cart.taxes_included -%}
                    {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
                  {%- elsif shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                  {%- else -%}
                    {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
                  {%- endif -%}
                </small>
              </div>
            {%- else -%}
              <div class="cart__ctas" {{ block.shopify_attributes }}>
                <noscript>
                  <button type="submit" class="twy-hover cart__update-button button button--secondary" form="cart">
                    {{ 'sections.cart.update' | t }}
                  </button>
                </noscript>

                <button type="submit" id="checkout" class="twy-hover cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
                  {{ 'sections.cart.checkout' | t }}
                </button>
              </div>

<!--              {%- if additional_checkout_buttons -%}
                <div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
                  {{ content_for_additional_checkout_buttons }}
                </div>
              {%- endif -%}  -->
          {%- endcase -%}
        {% endfor %}

        <div id="cart-errors"></div>
      </div>
    </div>
  </div>
</div>

{% javascript %}
  class CartNote extends HTMLElement {
    constructor() {
      super();

      this.addEventListener('change', debounce((event) => {
        const body = JSON.stringify({ note: event.target.value });
        fetch(`${routes.cart_update_url}`, {...fetchConfig(), ...{ body }});
      }, 300))
    }
  }

  customElements.define('cart-note', CartNote);
{% endjavascript %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const cartSubmitInput = document.createElement('input');
    cartSubmitInput.setAttribute('name', 'checkout');
    cartSubmitInput.setAttribute('type', 'hidden');
    document.querySelector('#cart').appendChild(cartSubmitInput);
    document.querySelector('#checkout').addEventListener('click', function(event) {
      document.querySelector('#cart').submit();
    });
  });
</script>

{% schema %}
{
  "name": "t:sections.main-cart-footer.name",
  "class": "cart__footer-wrapper",
  "settings": [
  {
    "type": "checkbox",
    "id": "show_cart_accessories",
    "default": false,
    "label": "Show Accessories"
  },
  {
    "type": "collection",
    "id": "collection",
    "label": "Collection"
  },
  {
    "type": "text",
    "id": "title",
    "label": "Featured collection"
  },
   {
      "type": "richtext",
      "id": "text",
      "label": "Remark"
    },
  {
    "type": "range",
    "id": "products_to_show",
    "min": 2,
    "max": 12,
    "step": 2,
    "default": 4,
    "label": "products to show"
  },
  {
    "type": "checkbox",
    "id": "show_view_all",
    "default": true,
    "label": "Show_view_all"
  },
  {
    "type": "checkbox",
    "id": "swipe_on_mobile",
    "default": false,
    "label": "swipe_on_mobile"
  },
  {
    "type": "header",
    "content": "header"
  },
  {
    "type": "select",
    "id": "image_ratio",
    "options": [
      {
        "value": "adapt",
        "label": "adapt"
      },
      {
        "value": "portrait",
        "label": "portrait"
      },
      {
        "value": "square",
        "label": "square"
      }
    ],
    "default": "adapt",
    "label": "adapt"
  },
  {
    "type": "checkbox",
    "id": "show_secondary_image",
    "default": false,
    "label": "show_secondary_image"
  },
  {
    "type": "checkbox",
    "id": "add_image_padding",
    "default": false,
    "label": "add_image_padding"
  },
  {
    "type": "checkbox",
    "id": "show_image_outline",
    "default": true,
    "label": "show_image_outline"
  },
  {
    "type": "checkbox",
    "id": "show_vendor",
    "default": false,
    "label": "show_vendor"
  },
  {
    "type": "checkbox",
    "id": "show_rating",
    "default": false,
    "label": "show_rating",
    "info": "show_rating"
  },
    {
      "type": "checkbox",
      "id": "show_cart_note",
      "default": false,
      "label": "t:sections.main-cart-footer.settings.show_cart_note.label"
    },
    {
      "type": "text",
      "id": "add_to_cart",
      "default": "Add to cart",
      "label": "Add to cart"
    }
  ],
  "blocks": [
    {
      "type": "subtotal",
      "name": "t:sections.main-cart-footer.blocks.subtotal.name",
      "limit": 1
    },
    {
      "type": "buttons",
      "name": "t:sections.main-cart-footer.blocks.buttons.name",
      "limit": 1
    },
    {
      "type": "@app"
    }
  ]
}
{% endschema %}
